<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡(Transitions)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .fade-enter-active,.fade-leave-active{  /*指就是html中fade名称*/
            transition:  opacity 3s;        /*3s的动画过渡时间*/
        }
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }
    </style>
</head>
<body>
<div id="case12-demo1">
    <button v-on:click="showClick">点击隐藏/显示</button><br>
    <transition name="fade">   <!--fade自定义名称-->
        <p v-show="show" v-bind:style="styleobj">过渡(Transitions)的简单实例</p>
    </transition>
    <transition name="fade">
        <img src="../images/timg2.jpg" v-bind:style="styleobj2" v-show="!show" />
    </transition>
</div>
<script type="text/javascript">
    var case12Demo1=new Vue({
        el:"#case12-demo1",
        data:{
            show:true,
            styleobj:{
                fontsize:'30px',
                color:'red'
            },
            styleobj2:{
                width:'500px'
            }
        },
        methods:{
            showClick:function () {
                case12Demo1.show=!case12Demo1.show
            }
        }
    })
</script>
</body>
</html>